<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	*{ padding:0; margin:0; list-style:none;}
	.tab { width:300px; height:300px; border:1px solid red; margin:100px auto;}
	input{ width:96px; height:30px; font-size: 20px;}
	.active{ background:red; color:white;}
	.tab div{ width:300px; height:300px; font-size:50px; text-align:center; line-height:300px; color:red; display:none;}
	.tab div.show{ display:block;}
</style>
<script type="text/javascript" src="bundle.js" ></script>
</head>
<body>
	<div class="tab" id="tab">
    	<input class="active" type="button" value="按钮1" />
        <input type="button" value="按钮2" />
        <input type="button" value="按钮3" />
        <div class="show">11111</div>
        <div>22222</div>
        <div>33333</div>
    </div>
	<div class="tab" id="tab2">
    	<input class="active" type="button" value="按钮1" />
        <input type="button" value="按钮2" />
        <input type="button" value="按钮3" />
        <div class="show">11111</div>
        <div>22222</div>
        <div>33333</div>
    </div>
</body>
<script>
class Tab{
		constructor(str){
			this.parent=document.querySelector(str);
			this.aInp=document.querySelectorAll('input');
			this.aDiv=document.querySelectorAll('.tab div');
			this.show();
		}
		show(){
			let _this=this;
			for(let i=0; i<this.aInp.length;i++){
				this.aInp[i].onclick=function(){
					_this.index=i;
					_this.fn(i);	
				};
			}		
		}
		fn(i){
			console.log(this);//自动转向对象本身
			for(var j=0;j<this.aDiv.length;j++){
				this.aInp[j].className='';
				this.aDiv[j].className='';
			}
			this.aDiv[i].className='show';
			this.aInp[i].className='active';		
		}
	}
	class AutoPlayTab extends Tab{
		constructor(str){
			super(str);
			this.autoFn();
			this.index=0;
		}
		autoFn(){
		var _this=this;
		setInterval(function(){
			_this.index++
			if(_this.index==_this.aInp.length){	
				_this.index=0;								
			}
			_this.fn(_this.index);
			},2000);	
		}
	}
	window.onload=function(){
		new Tab("#tab");	
		new AutoPlayTab('#tab2');
	}
</script>
</html>











